<template>
    <div class="project">
        <div class="box80">
            <el-row :gutter="16">
                 <el-col :span="5">
                     <div class="choose">
                             <div @click="chooseProjectType(0)" :class="{active:chooseProjectTypeRadio == 0}"><el-radio  label="1">全部项目</el-radio></div>
                             <div @click="showCreateProject()" class="add"> 
                                    <i class="el-icon-circle-plus"></i>
                                    <button>新建项目</button>
                             </div>
                             <div @click="chooseProjectType(1)" :class="{active:chooseProjectTypeRadio == 1}" class="archive ject"><img src="@/assets/images/icon13.png" alt="">
                                 <span>归档项目</span>
                             </div>
                             <div @click="chooseProjectType(2)" :class="{active:chooseProjectTypeRadio == 2}" class="my ject"><img src="@/assets/images/icon14.png" alt="">
                                <span>负责项目</span>
                             </div>
                             <div @click="chooseProjectType(3)" :class="{active:chooseProjectTypeRadio == 3}" class="audit ject"><img src="@/assets/images/icon15.png" alt="">
                                <span>待审项目</span>
                             </div>
                     </div>
                     <div class="project_search">
                         <div class="typeS">
                           <el-select  placeholder="项目类型" v-model="request.categoryId">
                                <el-option label="" value="">全部</el-option>
                                <el-option v-for="item in projectTypeList" :key="item.id" :label="item.categoryName" :value="item.id"></el-option>
                            </el-select>
                        </div>
                        <div class="time">
                            <div class="block timex">
                                <span class="demonstration">项目时间</span>
                                <el-date-picker
                                    v-model="time"
                                    type="daterange"
                                    range-separator="-"
                                    format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                        </div>
                        <div class="pro_name">
                            <div class="demonstration">项目名称</div>
                            <el-input v-model="request.itemNameLike" placeholder="输入文字查询"></el-input>
                        </div>
                        <div class="pro_man">
                            <div class="demonstration">项目负责人</div>
                            <el-input v-model="request.fzrName" placeholder="输入文字查询"></el-input>
                        </div>
                        <div class="pro_man">
                            <div class="demonstration">第二负责人</div>
                            <el-input v-model="request.secondFzrName" placeholder="输入文字查询"></el-input>
                        </div>
                        <div class="sumbit"><el-button type="primary" @click="search(1)">查 询</el-button></div>
                            
                     </div>
                </el-col>
                 <el-col :span="19">
                     <!--添加/修改 区域 -->
                     <div v-if="isCreateView" class="increase">
                        <el-form ref="form" :inline="true"  class="demo-form-inline">
                            <div class="wid100">
                            <div class="lt">
                                <div class="feng">项目封面</div>
                                <el-upload
                                    class="avatar-uploader"
                                    :headers ="headers"
                                    :action="uploadUrl"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="form.coverPic" :src="ImgPath + form.coverPic" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </div>
                            <div class="rt">
                                <el-form-item label="项目名称" class="bo50" 
                                :rules="[
                                    { required: true, message: '项目名称', trigger: 'blur' }
                                ]"
                                >
                                    <el-input v-model="form.itemName" placeholder="项目名称"></el-input>
                                </el-form-item>
                                <el-form-item label="项目编号" class="bo50">
                                    <el-input v-model="form.itemCode" ></el-input>
                                </el-form-item>
                                 <el-form-item label="项目类型" class="bo50"
                                  :rules="[
                                    { required: true, message: '项目类型', trigger: 'blur' }
                                ]">
                                    <el-select  placeholder="项目类型" v-model="form.categoryId">
                                        <el-option label="" value="">全部</el-option>
                                        <el-option v-for="item in projectTypeList" :key="item.id" :label="item.categoryName" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="第二负责人" class="bo50">
                                    <el-select filterable placeholder="第二负责人" v-model="form.secondFzrId" :clearable="true">
                                        <el-option label="请选择" value="0"></el-option>
                                        <el-option v-for="item in userList" :key="item.id" :label="item.userName" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="项目地点" class="bo70 select" :rules="[
                                    { required: true, message: '项目地点', trigger: 'blur' }
                                ]">
                                    <el-select v-model="stateId" @change="changeState" placeholder="请选择省" class="address_select"  size="small">
                                       <el-option v-for="(item,index) in stateList" :key="index" :label="item.areaName" :value="item.id"></el-option>
                                    </el-select>
                                    <el-select v-model="form.city" placeholder="请选择市" class="address_select" size="small">
                                        <el-option v-for="(item,index) in cityList" :key="index" :label="item.areaName" :value="item.areaName"></el-option>
                                    </el-select>
                                    <el-input v-model="form.address" ></el-input>
                                </el-form-item>
                                <el-form-item label="项目时间" class="bo70 " 
                                :rules="[
                                    { required: true, message: '项目时间', trigger: 'blur' }
                                ]">
                                    <el-date-picker 
                                        v-model="formTime"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                    </el-date-picker>
                                </el-form-item>
                                <el-button v-if="form.id > 0" type="primary" @click="editProject()">保  存</el-button>
                                <el-button v-else type="primary" @click="createProject()">保  存</el-button>
                                 <el-button  type="primary" @click="projectTotal()" v-show="form.id > 0 && currentUser.organization.isStartRules">项目总则信息</el-button>
                            </div>
                            </div>
                        </el-form>
                    <div class="increase_table" v-show="form.id > 0">
                        <div class="dewe">
                                <table style="width:100%">
                                    <tr class="trTop">
                                        <td><div style="width:110px;">项目名称</div></td>
                                        <td><div style="width:110px;">单体属性</div></td>
                                        <td v-for="(td,i) in RootProjectTd" :key="i">{{td.roleName}}</td>
                                    </tr>
                                    <tr :style="chooseChildRow == 0 ? 'background:#ecf5ff' : ''" @click="projectChooseChildRow(0)">
                                        <td>{{currentRootProject.itemName}}</td>
                                        <td>{{currentRootProject.projectType == 1 ? "区" : getSignLeName(currentRootProject.monomerAttr)}}</td>
                                        <td v-for="(td,i) in RootProjectTd" :key="i">
                                            <div style="width:110px;min-height:30px" @click="showRoleUserView(td)">
                                                <template v-if="td.userList.length > 0">
                                                    <span v-for="(j,i) in td.userList" :key="i"><span v-show="i!=0">、</span>{{j.userName}}</span>
                                                </template>
                                                <template v-else>
                                                    <span>+</span>
                                                </template>
                                            </div>
                                        </td>
                                    </tr>
                                    <tbody v-for="project in projectChildList" class="lst">
                                        <tr :style="chooseChildRow == project.id ? 'background:#ecf5ff' : ''" @click="projectChooseChildRow(project.id)">
                                            <td class="text-left"><i class="el-icon-s-order"></i>{{project.itemName}}</td>
                                            <td>{{project.projectType == 1 ? "区" : getSignLeName(project.monomerAttr)}}</td>
                                            <td v-for="(td,i) in RootProjectTd" :key="i">
                                                <div v-if="td.roleName=='灯参制作人' || td.roleName=='数量填入人'">
                                                    <div v-if="getRootByProjectIdAndRoleId(project.id,td.roleId).length==0" style="width:110px;min-height:30px" @click="showRoleUserViewNo(td.roleId,project.id)">+</div>
                                                    <div v-for="c in getRootByProjectIdAndRoleId(project.id,td.roleId)" >
                                                        <div style="width:110px;min-height:30px" @click="showRoleUserView(c)">
                                                            <!-- {{c.id}}
                                                            {{c.roleId}}
                                                            {{td.roleId}} -->
                                                            <span v-if="c.projectId == project.id && c.roleId == td.roleId">
                                                                <template v-if="c.userList.length > 0">
                                                                    <span v-for="(u,l) in c.userList" :key="l"><span v-show="l!=0">、</span>{{u.userName}}</span>
                                                                </template>
                                                                <template v-else>
                                                                    <span>+</span>
                                                                </template>
                                                            </span>
                                                            <span v-else>
                                                                +
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr :style="chooseChildRow == child.id ? 'background:#ecf5ff' : ''"  v-for="child in project.children" @click="projectChooseChildRow(child.id)"> <!-- -->
                                            <td class="text-left"> &nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-document"></i>{{child.itemName}}</td>
                                            <td>{{child.projectType == 1 ? "区" : getSignLeName(child.monomerAttr)}}</td>
                                            <td v-for="(td,i) in RootProjectTd" :key="i">
                                                <div v-if="td.roleName=='灯参制作人' || td.roleName=='数量填入人'">
                                                    <div v-if="getRootByProjectIdAndRoleId(child.id,td.roleId).length==0" style="width:110px;min-height:30px" @click="showRoleUserViewNo(td.roleId,child.id)">+</div>
                                                    <div v-for="c in getRootByProjectIdAndRoleId(child.id,td.roleId)" >
                                                        <div  style="width:110px;min-height:30px" @click="showRoleUserView(c)">
                                                            <span v-if="c.projectId == child.id && c.roleId == td.roleId">
                                                                <template v-if="c.userList.length > 0">
                                                                    <span v-for="(u,l) in c.userList" :key="l"><span v-show="l!=0">、</span>{{u.userName}}</span></template>
                                                                <template v-else>
                                                                    <span>+</span>
                                                                </template>
                                                            </span>
                                                            <span v-else>
                                                                +
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                        </div>
                            
                        </div>
                        <el-dialog
                            :title="batchChildFormTitle"
                            :visible.sync="isShowChildView"
                             width="400"
                            custom-class='addFind' v-dialogDrag
                            >
                                        <div class="addProjectForm">
                                            <el-form label-width="70px" class="demo-form-inline">
                                                <el-form-item label="项目名称">
                                                    <el-input placeholder='请将多个项目用","分割' type="textarea" v-model="bathChildForm.itemName"></el-input>
                                                </el-form-item>
                                                 <el-form-item label="项目属性">
                                                    <el-select v-model="bathChildForm.monomerAttr" placeholder="请选择">
                                                        <el-option v-for="item in singleList" :key="item.id" :label="item.dictCont" :value="item.id"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item>
                                                    <el-button v-if="bathChildForm.id>0" type="primary" @click="updateChildProject()">修改</el-button>
                                                    <el-button v-else type="primary" @click="batchCreateChild()">添加</el-button>
                                                </el-form-item>
                                            </el-form>
                                </div>
                        </el-dialog>
                        <el-dialog
                            class="duibipt"
                            title="项目角色用户"
                            custom-class="dexz"
                             v-dialogDrag
                            :visible.sync="isShowRoleUserView" width="600" height="500">
                                        <div class="addProjectForm">
                                                <div style="padding-bottom:10px">
                                                    用户名：<el-input  v-model="notSelectUserNameSearch" @keyup.enter.native="notSelectUserListQuery(1)" style="width:200px"></el-input> <el-button native-type="button" @click="notSelectUserListQuery(1)" type="primary">查询</el-button>
                                                </div>
                                            <div class="wid100">
                                                <div class="lt">
                                                    <div class="sew">可选用户</div>
                                                    <el-table ref="singleTable" border :data="notSelectUserList" highlight-current-row max-height="500" style="width: 100%">
                                                        <el-table-column type="index" label="序号" width="50"></el-table-column>
                                                        <el-table-column property="userName" label="用户名"></el-table-column>
                                                         <el-table-column label="操作">
                                                            <template slot-scope="scope">
                                                                  <span class="dedef" @click="addNotSelectUser(scope.row)">添加</span>
                                                            </template>
                                                         </el-table-column>
                                                    </el-table>
                                                    <el-pagination
                                                        small
                                                        @current-change="not_handleCurrentChange"
                                                        :current-page="notCurrentPage"
                                                        :page-size="8"
                                                        layout="prev, pager, next"
                                                        :total="notSelect_totalCount">
                                                    </el-pagination>
                                                </div>
                                                <div class="rt">
                                                    <div class="sew">已选用户</div>
                                                        <el-table ref="singleTable" border :data="yiSelectUserList" highlight-current-row  max-height="500" style="width: 100%">
                                                        <el-table-column type="index" label="序号" width="50"></el-table-column>
                                                        <el-table-column property="userName" label="用户名"></el-table-column>
                                                         <el-table-column label="操作">
                                                            <template slot-scope="scope">
                                                                  <span class="dedef" @click="deleteChooseUser(scope.row)">删除</span>
                                                            </template>
                                                         </el-table-column>
                                                        </el-table>
                                                        <el-pagination
                                                        small
                                                        @current-change="yi_handleCurrentChange"
                                                        :current-page="yiCurrentPage"
                                                        :page-size="8"
                                                        layout="prev, pager, next"
                                                        :total="yiSelect_totalCount">
                                                        </el-pagination>
                                                    
                                                </div>
                                            </div>
                                </div>
                        </el-dialog>
                        <div class="baocun" v-show="form.id > 0">
                              <el-button  @click="showAddChildView(form.id,true)">添加子项目</el-button>
                              <el-button  @click="showAddChildView(form.id,false)">修改子项目</el-button>
                              <el-button  @click="deleteChildProject()">删除子项目</el-button>
                              <el-button  @click="downloadTemplate()">项目结构模板下载</el-button>
                              <el-upload
                                    v-show="currentRootProject.projectType != 2" 
                                    name="doc"
                                    class="avatar-uploader avatarS"
                                    :headers ="headers"
                                    :action="ProjectImportUrl"
                                    :show-file-list="false"
                                    :on-success="ProjectImportSuccess"
                                    :before-upload="ProjectImportBefore">
                                        <el-button>项目结构上传</el-button>
                                </el-upload>
                          </div>
                    </div>
                    <!--列表 区域 -->
                    <div v-else>
                     <el-row :gutter="14">
                        <el-col :span="6" v-for="(item, index) in tableData" :key="index">
                            <div class="contList" >
                                <div class="projectItem">
                                    <div class="projectItemsw">
                                        <div class="img"  @click="moreProject(item.id)">
                                            <img :src="ImgPath + item.coverPic" alt>
                                        </div>
                                        <div class="projectItemswbg"  @click="moreProject(item.id)" v-if="(currentUser.id == item.fzrId || currentUser.id == item.secondFzrId) && (chooseProjectTypeRadio == 0 || chooseProjectTypeRadio == 2)"></div>
                                        <div class="post_img" v-if="(currentUser.id == item.fzrId || currentUser.id == item.secondFzrId) && (chooseProjectTypeRadio == 0 || chooseProjectTypeRadio == 2)">
                                                <div class="BoxTable">
                                                        <ul >
                                                            <li class="information" >
                                                                <!-- 编辑 -->
                                                                <el-button type="text" @click="shoeEditView(item)"><i class="el-icon-edit-outline"></i></el-button>
                                                            </li>
                                                            <li  @click="deleteProject(item.id)"><i class="el-icon-delete"></i></li>
                                                            
                                                        </ul>
                                                </div>
                                            </div>
                                    </div>
                                    <div class="cont">
                                        <div class="font14" >{{item.itemName}}</div>
                                        <div class="font12">{{item.itemCode}} <span><i class="el-icon-s-custom"></i>{{item.fzrName}}</span></div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                     </el-row>
                     <div class="pag">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="request.page"
                        :page-size="request.rows"
                        layout="total, prev, pager, next, jumper"
                        :total="totalCount">
                        </el-pagination>
                    </div>
                   </div>
                 </el-col>
            </el-row>
        </div>
        <!--项目总则信息  -->
         <el-dialog :visible.sync="projectTotalDialog" id="export" title="项目灯参总则配置项" custom-class='export'   v-dialogDrag>
             <el-form ref="exportform" label-width="80px">
                <table border class="exportTable">
                    <tr v-for="(item,index) in projectConfigureList" :key="index">
                        <td width="170" v-html="item.paramName.split(',')[0]+':'"></td>
                        <td width="210">
                            <el-date-picker v-if="item.paramName == '生成时间'" v-model="item.paramValue" type="date" placeholder="选择日期"></el-date-picker>
                            <template v-else-if="item.paramName == '所属公司'">
                                <el-popover ref="popover21" placement="bottom" trigger="focus" popper-class="xiala">
                                    <ul class="ulsse">
                                        <li v-for="item1 in organizationsList" @click="setCompany(item1.orgName,item1.orgCode,item)">{{item1.orgName}}</li>
                                    </ul>
                                </el-popover>
                                <el-input v-model="exportform.companyText" v-popover:popover21></el-input>
                            </template>
                            <el-popover v-else ref="popoverlist" :id="'popover-'+index" placement="bottom" trigger="focus" popper-class="xiala">
                                <ul class="ulsse">
                                    <li v-for="(j,i) in options[index]" :key="i" @click="setProjectConfigure(item,j.dictCont,index)" v-html="j.dictCont"></li>
                                </ul>
                                <el-input  v-model="item.paramValue" slot="reference" ></el-input>
                            </el-popover>
                             <!-- <div id="container"  v-else-if="options[index].length>0">
                                <select  class="select-box" v-model="item.paramValue" :id="'popover-'+index">
                                    <option v-for="(j,i) in options[index]" :key="i" @click="setProjectConfigure(item,j.dictCont,index)" v-html="j.dictCont"></option>
                                </select>
                                <el-input  v-model="item.paramValue" @input="changeValue()"></el-input>
                            </div> -->
                            <!-- <div id="container"  v-else>
                                <el-input  v-model="item.paramValue" @input="changeValue()"></el-input>
                            </div> -->
                        </td>
                    </tr>
                    
                </table>
                <el-form-item class="tectCent">
                    <el-button type="primary" @click="projectTotalDialog = false" >取消</el-button>
                    <el-button type="primary" @click="exportFullExcelNow()" >确定</el-button>
                </el-form-item>
             </el-form>
        </el-dialog>
    </div>
</template>
<style  rel="stylesheet/scss" lang="scss"   > 

.ulsse{
    li{
        margin-bottom: 8px;
        &:last-child{
            margin-bottom: 0;
        }
    }
}
.timex .el-range-editor.el-input__inner{
    padding: 3px 3px 3px 10px;
}
.dedef{
    cursor: pointer;
}
.el-pagination{
    text-align: center
}
.dexz {
    width: 600px;
    .el-dialog__body{
        padding: 0 20px 10px;
    }
} 
.addFind{
    width: 400px;
    height: auto !important;
    .el-select{
        width: 100%;
    }
    .el-form-item:last-child{
        text-align: center;
        .el-form-item__content{
            margin-left: 0 !important;
        }
    }
}
.lst{
    tr{
        border-left: 1px solid #EBEEF5;
    }
    td{
        i{
            margin-right: 5px;
        }
    }
    .text-left{
        text-align: left !important;
        padding: 12px 5px !important;
    }
}
.el-button--primary{
            background-color: #5a63a3;
	        border-radius: 4px;
            color: #fff;
            border: none;
        }
.duibipt.el-dialog__wrapper{
    .el-dialog{
        height: auto;
        .el-dialog__body{
            height: auto;
        }
    }
}
    .project{
        padding-top: 120px;
        .choose{
            background-color: #ffffff;
            border-radius: 4px;
            border: solid 1px #eeeeee;
            padding: 22px 30px;
            margin-bottom: 14px;
            font-size: 15px;
            .el-radio__input.is-checked .el-radio__inner{
                border-color: #5a63a3;
                background: #5a63a3;
            }
            .el-radio__label{
                font-size: 15px;
                padding-left: 12px;
                color: #333
            }
            .add{
                margin-top: 16px;
                margin-bottom: 16px;
                i{
                    color: #5a63a3;
                    margin-right: 12px;
                    font-size: 17px;
                }
                button{
                    color: #fff;
                    background: #5a63a3;
                    height: 38px;
                    line-height: 38px;
                    border: none;
                    border-radius: 4px;
                    width: calc(100% - 29px);
                    width: -webkit-calc(100% - 29px);
                }
            }
            .active{
                .el-radio__label{
                     color:#5a63a3;
                        font-weight: bold;
                }
                .el-radio__input{
                    .el-radio__inner::after{
                        background-color: #5a63a3;
                        -webkit-transform: translate(-50%,-50%) scale(1); 
                        transform: translate(-50%,-50%) scale(1); 
                        width: 8px;
                        height: 8px;
                    }
                }
            }
            .ject{
                margin-bottom: 16px;
                color: #333;
                cursor: pointer;
                &.active{
                    span{
                        color:#5a63a3;
                        font-weight: bold;
                    }                    
                }

                a{
                    display: inline;
                }
                img{
                    display: inline-block;
                    margin-right: 12px;
                    position: relative;
                    top: 3px;
                }
                &:last-child{
                    margin-bottom: 0;
                }
                span{
                     width: calc(100% - 29px);
                    width: -webkit-calc(100% - 29px);
                    display: inline-block;
                }
            }
        }
        .project_search{
            background-color: #ffffff;
            border-radius: 4px;
            padding: 12px 0;
            margin-bottom: 24px;
            .el-collapse{
                border: none;
                .el-collapse-item__wrap{
                    border:none;
                }
            }
            .el-collapse-item__header{
                padding: 0 30px;
                border-bottom: 1px solid #eeeeee;
            }
            .demonstration{
                color: #333333;
                margin-bottom: 10px;
                display: block;
            }
            .el-input__inner{
                font-size: 12px;
            }
            .time{
                padding: 16px 30px;
                .block .el-input__inner{
                    width: 100%;
                }
            }
            .sumbit{
                padding: 0 30px;
                button{
                    width: 100%;
                    background-color: #5a63a3;
                    border-radius: 4px;
                    border: solid 1px #c3c7ea;
                    &:hover{
                        border-color: #5a63a3;
                        background: #c3c7ea;
                    }
                }
            }
            .pro_name{
                padding: 16px 30px;
                border-top: 1px solid #eeeeee;
                border-bottom: 1px solid #eeeeee;
            }
            .pro_man{
                padding: 16px 30px;
            }
        }
        .contList{
            background-color: #ffffff;
            border-radius: 4px;
            border: solid 1px #eeeeee;
            margin-bottom: 16px;
            .projectItem{
                padding: 8px;
                &:hover{
                    box-shadow: 2px 4px 16px 0px	rgba(90, 99, 163, 0.31);
                    .post_img{
                        display: block;
                       
                    }
                    .projectItemswbg{
                        display: block;
                    }
                }
                .information a{
                    padding: 0;
                }
            }
            .img{
                height: 200px;
                position: relative;}
                .projectItemsw{
                    position: relative;
                    .projectItemswbg{
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        position: absolute;
                        background-color: rgba(90, 99, 163, 0.86);
                        display: none;
                    }
                }
                .post_img{
                    position: absolute;
                    width: 140px;
                    height: auto;
                    text-align: center;
                    top:50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    -webkit-transform: translate(-50%,-50%);
                    display: none;
                    z-index: 999;
                        ul{
                            position: absolute;
                            z-index: 2;
                            top: 50%;
                            left: 0;
                            width: 100%;
                            text-align: center;
                            transform: translateY(-50%);
                            -webkit-transform: translateY(-50%);
                        }
                    li{
                        display: inline-block;
                        width: 30px;
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                        background: #fff;
                        border-radius: 4px;
                        margin-left: 10px;
                        &:first-child{
                            margin-left: 0;
                        }
                        &:hover{
                            background: #ffc028;
                            color: #fff;
                        }
                        &.xiazai{
                            .el-button{
                                width: 100%;
                                height: 100%;
                                padding: 0;
                                &:hover{
                                    background: #ffc028;
                                    color: #fff;
                                    border-color:  #ffc028;
                                }
                            }
                        }
                        &.information .el-button{
                            width: 100%;
                            height: 100%;
                            padding: 0;
                            color: #000;
                            position: relative;
                            z-index: 9999;
                            &:hover{
                                color: #fff;
                            }
                        }
                    }
                }
            
            .cont{
                padding: 16px 8px;
                .font14{
                    line-height: 1em;
                    overflow:hidden; 
                    display:-webkit-box; 
                    -webkit-box-orient:vertical; 
                    -webkit-line-clamp:1;
                    text-overflow:ellipsis;
                    word-break: break-all;
                    height: 16px;
                    cursor: pointer;
                    &:hover{
                        color: #5a63a3;
                    }
                }
                .font12{
                    line-height: 1em;
                    margin-top: 10px;
                    height: 13px;
                    span{
                        float: right;
                        i{
                            color: #bfbfbf;
                            width: 17px;
                            height: 17px;
                            border-radius: 50%;
                            text-align: center;
                            line-height: 17px;
                            background: #ececec;  
                            margin-right: 10px;                      }
                    }
                }
            }
        }
        .pag{
            text-align: center;
            padding: 2rem 0 4rem;
            .el-pager li{
                margin: 0 5px;
                &.active,&:hover{
                    background-color: #5a63a3;
                    color: #fff;
                }
            }
        }
    }
</style>
<style  rel="stylesheet/scss" lang="scss">
.export{
    input{
        width: 100%;
    }
    a{
        margin-bottom: 8px;
        text-align: center;
        color: #666;
        &:hover{
            color: #5a63a3;
        }
        &:last-of-type{
            margin-bottom: 0;
        }
    }
}
.information_cont{
    .title{
        color: #333333;
        font-size: 18px;
        margin-bottom: 20px;
        text-align: center;
    }
    .el-select,.el-range-editor.el-input__inner{
        width: 100%;
    }
    .el-dialog__body{
        padding: 30px 150px 0;
    }
    .el-dialog__footer{
        padding: 30px 150px;
        text-align: center;
        .el-button--primary{
            background-color: #5a63a3;
	        border-radius: 4px;
            color: #fff;
            border: none;
        }
    }
    .el-dialog__header{
        .el-dialog__headerbtn{
            background-color: #5a63a3;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            i{
                color: #fff;
            }
        }
    }
    .upload-demo{
        .el-button--primary{
            background-color: #5a63a3;
	        border-radius: 4px;
            color: #fff;
            border: none;
        }
        .el-upload__tip{
            display: inline;
            margin-left: 20px;
            color: #777777;
        }
    }
}
</style>

<script>
import { stat } from 'fs';
export default {
    data(){
        return{
            currentUserCompany:'',
            aS22:'',
            projectTotalDialog:false,
            notSelect_totalCount:0,
            yiSelectUserList:[],
            yiSelect_totalCount:0,
            totalTreeData:[],
            batchChildFormTitle:'',
            currentRootProject:{},
            notCurrentPage:1,
            yiCurrentPage:1,
            chooseChildRow:0,
            chooseProjectTypeRadio:"0",
            ProjectType:'0',
            request:{
                page:1,
                rows:16,
                parentId:0,
                fzrName:'',
                itemNameLike:'',
                startDatePStart:'',
                startDatePEnd:'',
                categoryId:'',
                secondFzrName:''
            },
            userRolelist:[],
            tableData:[],
            totalCount:0,
            time:[],
            isCreateView:false,
            form:{
                coverPic:'',
                itemName:'',
                itemCode:'',
                categoryId:'',
                secondFzrId:'0',
                region:'',
                city:'',
                address:'',
                startDateP:'',
                endDateP:'',
                parentId:0
            },
            uploadUrl:'',
            ProjectImportUrl:'',
            formTime:[],
            projectTypeList:[],
            userList:[],
            projectChildList:[],
            stateList:[],
            cityList:[],
            isShowSetPeopleView:false,
            singleList:[],
            headers: {
                "Authorization": localStorage.getItem('token')
            },
            childList:[],
            bathChildForm:{
                itemName:'',
                parentId:0,
                projectType:'',
                monomerAttr:''
            },
            isShowChildView:false,
            isShowRoleUserView:false,
            currentRoleUserRow:{
                userList:[]
            },
            notSelectUserNameSearch:'',
            stateId:'',
            notSelectUserList:[],
            RootProjectTd:[],
            currentUser:{},
            projectConfigureList:[],
            options:[],
            exportform:{
                companyText:'',
                company:''
            },
            organizationsList:[]
        }
    },
    created(){
        if(this.$route.query.dio != null){
            this.chooseProjectTypeRadio = this.$route.query.dio
        }
        this.initData()

        let self = this;
        this.$http.postQuery("/api/organizations/json", {isOrgState:true}, function(res) {
            if (res.success) {
                self.organizationsList = res.data;
            }
        });
    },
    watch:{
        "form.secondFzrId":function(val,old){
            if(val == ""){
                this.form.secondFzrId  = '0'
            }
        }
    },
    methods:{
        projectTotal(){
            var options = []
            let self = this
            var targetProjectId = this.form.id
            this.$http.postObj('/api/projectConfigures/json/'+targetProjectId,{},function(res){
                if(res.success){
                    self.projectConfigureList = res.data
                    for(var i = 0;i<self.projectConfigureList.length;i++){
                        var code = self.projectConfigureList[i].paramCode
                        var name = self.projectConfigureList[i].paramName
                        if(name == '项目名称'){
                            self.projectConfigureList[i].paramValue = self.currentRootProject.itemName
                        }
                        if(name == "所属公司"){
                                for(var a = 0;a<self.organizationsList.length;a++){
                                    if(self.organizationsList[a].orgCode == self.projectConfigureList[i].paramValue){
                                        self.exportform.companyText = self.organizationsList[a].orgName
                                        self.exportform.company = self.organizationsList[a].orgCode
                                    }
                                }
                        }
                            self.$http.getSync('/api/dictTypeAllList',{indexPinyin:code},function(res){
                                options.push(res.data)
                            })
                    }
                    self.options = options
                    self.projectTotalDialog = true
                }else{
                    self.$message.error(res.data)
                }
            })
        },

        exportFullExcelNow(){
            let self = this
            
            var tempList = [];
            for(var i = 0;i<this.projectConfigureList.length;i++){
                var item = this.projectConfigureList[i]
                tempList.push({
                    id:item.id,
                    paramCode:item.paramCode,
                    paramDesc:item.paramDesc,
                    paramName:item.paramName,
                    paramValue:item.paramValue,
                    projectId:item.projectId
                })
            }
            // tempList.push({
            //     paramCode:"xiangmumingcheng",
            //     paramName:"项目名称",
            //     paramValue:this.exportform.projectName,
            // })
            // tempList.push({
            //     paramCode:"fengmianshijian",
            //     paramName:"生成时间",
            //     paramValue:this.exportform.date,
            // })
            // tempList.push({
            //     paramCode:"suoshugongsi",
            //     paramName:"所属公司",
            //     paramValue:this.exportform.company,
            // })

            var projectId = this.form.id
            this.$http.postObj('/api/projectConfigures/edit/'+projectId,tempList,function(res){
                if(res.success){
                    self.$message({
                        message: "操作成功！",
                        type: "success"
                    });
                    self.projectTotalDialog=false 
                }else{
                    self.$message.error(res.data)
                }
            })
            // this.$http.postObj('/api/lampparams/generateWholePdf/'+projectId,tempList,function(res){
            //     console.log(res)
            //     if(res.success){
            //         self.$message({
            //             message: "操作成功！",
            //             type: "success"
            //         });
            //         self.projectTotalDialog=false 
            //     }else{
            //         self.$message.error(res.data)
            //     }
            // })
        },
        HTMLDecode(text) { 
            var temp = document.createElement("div"); 
            temp.innerHTML = text; 
            var output = temp.innerText || temp.textContent; 
            temp = null; 
            return output; 
        },
        setProjectConfigure(item,value,index){
             item.paramValue = this.HTMLDecode(value)
             this.$set(this.projectConfigureList,index,item);
             for(var i = 0;i<this.$refs.popoverlist.length;i++){
                 this.$refs.popoverlist[i].doClose()
             }
        },
        setCompany(name,val,item){
            this.exportform.companyText = name
            this.exportform.company = val
            item.paramValue = val
            this.$refs.popover21.doClose()
        },
        getRootByProjectIdAndRoleId(pid,roleId){
            var temp = []
            for(var i = 0;i<this.userRolelist.length;i++){
                if(pid == this.userRolelist[i].projectId && roleId == this.userRolelist[i].roleId){
                    temp.push(this.userRolelist[i])
                }
            }
            return temp;
        },
        getRootByProjectId(pid){
            var temp = []
            for(var i = 0;i<this.userRolelist.length;i++){
                if(pid == this.userRolelist[i].projectId){
                    temp.push(this.userRolelist[i])
                }
            }
            return temp;
        },
        initData(){
            let self = this
            this.$http.get('/api/users/getCurrentUser',{},function(res){
                if(res.success){
                        self.currentUserCompany = res.data.organization.orgName
                        self.currentUser = res.data
                    }
            })
            
            this.getProjectTypeList();
            this.search(1)
        },
        search(page){
            this.isCreateView = false
            let self = this
            this.request.page = page

            //全部项目信息列表 0
            var url = '/api/projects/json'
            if(this.chooseProjectTypeRadio == "1"){
                //归档项目信息列表 1
                url = '/api/projects/archivingJson'
            }else if (this.chooseProjectTypeRadio == "2"){
                //我负责的项目信息列表 2
                url = '/api/projects/myJson'
            }else if (this.chooseProjectTypeRadio == "3"){
                //待审核 3
                url = '/api/projects/auditPageListJson'
            }

            if(this.time != null && this.time.length > 0){
                this.request.startDatePStart = this.time[0]
                this.request.startDatePEnd = this.time[1]
            }else{
                this.request.startDatePStart=''
                this.request.startDatePEnd=''
            }
            
            this.$http.postObj(url,this.request,function(res){
                if(res.success){
                    self.tableData = res.data.rows
                    self.totalCount = res.data.total
                }
            })
        },
        chooseProjectType(val){
            this.chooseProjectTypeRadio = val
            this.ProjectType = val
            this.search(1)
        },
        deleteProject(id,zi){
            let self = this
            this.$confirm('您确定要删除此项目吗?','提示',{
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                this.$http.deletePath('/api/projects/'+id,{},function(res){
                    if (res.success) {
                        self.$message({
                            message: "删除成功！",
                            type: "success"
                        });
                        if(zi != "zi"){
                            self.search(1)
                        }else{
                            self.searchChildList()
                        }
                    }else{
                    self.$message.error(res.data)
                    }
                })
            }).catch(()=>{});
            
        },
        deleteChildProject(){
            //删除子级
                var id = this.chooseChildRow
                if(id == null || id == '' || id == 0){
                    this.$message.error('请选择要删除的项目！');
                    return false
                }
            let self = this
            this.$confirm('您确定要删除吗?','提示',{
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                this.$http.deletePath('/api/projects/'+id,{},function(res){
                    if (res.success) {
                        self.$message({
                            message: "删除成功！",
                            type: "success"
                        });
                        self.searchChildList()
                    }else{
                    self.$message.error(res.data)
                    }
                })
            }).catch(()=>{});
        },
        moreProject(id){
            var gd = 0
            if(this.chooseProjectTypeRadio == 1){
                gd = 1
            }else if (this.chooseProjectTypeRadio == 3){
                gd = 3
            }
            this.$router.push('/parameterLampList?id='+id+"&gd="+gd+"&dio="+this.chooseProjectTypeRadio)
        },
        handleSizeChange(pageSize){
            this.request.rows = pageSize
            this.search(1)
        },
        handleCurrentChange(page) {
            this.search(page)
        },
        handleAvatarSuccess(res, file) {
            if(res.success){
                this.form.coverPic = res.data.savePath
            }
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        showCreateProject(){
            this.stateId = ''
            this.form={
                coverPic:'',
                itemName:'',
                itemCode:'',
                categoryId:'',
                secondFzrId:'0',
                region:'',
                city:'',
                address:'',
                startDateP:'',
                endDateP:'',
                parentId:0
            }
            this.initCreateOrEditData()
        },
        searchChildList(){
            let self = this
            this.$http.get("/api/projects/treeJson/"+self.form.id,{},function(res){
                if(res.success){
                    var data = res.data
                    self.totalTreeData = res.data
                    self.currentRootProject = res.data[0]
                    self.projectChildList = self.filterArray(data,self.form.id)
                }
            })
        },
        filterArray(data,parent) {
                var tree = [];
                var temp;
                for (var i = 0; i < data.length; i++) {
                    if (data[i].parentId == parent) {
                        var obj = data[i];
                        temp = this.filterArray(data, data[i].id);
                        if (temp.length > 0) {
                            obj.children = temp;
                        }
                        tree.push(obj);
                    }
                }
                return tree;
        },
        shoeEditView(row){
            let self= this
            this.$http.get('/api/projects/view/'+row.id,{},function(res){
                var item = res.data

                self.form={
                    id:item.id,
                    coverPic:item.coverPic,
                    itemName:item.itemName,
                    itemCode:item.itemCode,
                    categoryId:item.categoryId,
                    secondFzrId:item.secondFzrId,
                    region:item.region,
                    city:item.city,
                    address:item.address,
                    startDateP:item.startDateP,
                    endDateP:item.endDateP,
                    parentId:0
                }
                if(self.form.secondFzrId == null || self.form.secondFzrId == ""){
                    self.form.secondFzrId = '0'
                }
                self.initCreateOrEditData()
                self.getProjectRoleUserList()

            })
        },
        initCreateOrEditData(){
            this.isCreateView = true
            this.formTime = []
            this.getState()
            this.getUserList();
            this.getSingle();
            this.uploadUrl = this.$http.getSignUrl('/api/files/upload',{type:'image'})
            if(this.form.id != null ){
                
            this.ProjectImportUrl = this.$http.getSignUrl('/api/projects/importProjectExcel/'+this.form.id,{})
            console.log(this.ProjectImportUrl)

            }
        },
        getProjectRoleUserList(){
            //获取项目角色以及角色用户
            let self = this
            self.projectChildList = []
            this.$http.get('/api/projects/roles/users/json/'+self.form.id,{},function(res){
                if(res.success){
                    self.userRolelist = res.data
                    console.log(self.userRolelist)
                    self.RootProjectTd = self.getRootByProjectId(self.form.id)
                    console.log(self.RootProjectTd)
                    self.searchChildList()
                }
            })

                if(self.formTime.length == 0 && (self.form.startDateP != '' && self.form.endDateP != '')){
                    self.formTime.push(self.form.startDateP.split(' ')[0])
                    self.formTime.push(self.form.endDateP.split(' ')[0])
                }
        },
        createProject(){
            if(this.form.itemName == ''){
                this.$message.error('请输入项目名称！');
                return false
            }
            
            if(this.form.itemCode == ''){
                this.$message.error('请输入项目编号！');
                return false
            }
            
            if(this.form.categoryId == ''){
                this.$message.error('请选择项目类型！');
                return false
            }
            
            if(this.stateId == '' || this.form.city == ''){
                this.$message.error('请选择项目地点！');
                return false
            }
            
            if(this.formTime != null && this.formTime.length > 0){
                this.form.startDateP = this.formTime[0]
                this.form.endDateP = this.formTime[1]
            }else{
                this.$message.error('请选择项目时间！');
                return false
                this.form.startDateP=''
                this.form.endDateP=''
            }

            for (var i = 0;i<this.stateList.length;i++){
                if(this.stateList[i].id == this.stateId){
                    this.form.region = this.stateList[i].areaName
                }
            }
            let self = this
            //创建项目
            this.$http.postObj('/api/projects/create',this.form,function(res){
                console.log(res)
                if(res.success){
                self.$message({
                    message: "创建成功！",
                    type: "success"
                });
                self.form.id = res.data.id
                self.ProjectImportUrl = self.$http.getSignUrl('/api/projects/importProjectExcel/'+self.form.id,{})
            console.log(self.ProjectImportUrl)
                self.getProjectRoleUserList()
                }else{
                    self.$message.error(res.data)
                }
            })
        },
        editProject(){
            if(this.form.itemName == ''){
                this.$message.error('请输入项目名称！');
                return false
            }
            
            if(this.form.itemCode == ''){
                this.$message.error('请输入项目编号！');
                return false
            }
            
            if(this.form.categoryId == ''){
                this.$message.error('请选择项目类型！');
                return false
            }
            
            if(this.stateId == '' || this.form.city == ''){
                this.$message.error('请选择项目地点！');
                return false
            }
            
            if(this.formTime != null && this.formTime.length > 0){
                this.form.startDateP = this.formTime[0]
                this.form.endDateP = this.formTime[1]
            }else{
                this.$message.error('请选择项目时间！');
                return false
                this.form.startDateP=''
                this.form.endDateP=''
            }

            for (var i = 0;i<this.stateList.length;i++){
                if(this.stateList[i].id == this.stateId){
                    this.form.region = this.stateList[i].areaName
                }
            }
            // if(this.form.secondFzrId == ""){
            //     this.form.secondFzrId = 0
            // }
            let self = this
            //修改项目
            this.$http.putObj('/api/projects/'+this.form.id,this.form,function(res){
                console.log(res)
                if (res.success) {
                    self.$message({
                        message: "修改成功！",
                        type: "success"
                    });
                    self.getProjectRoleUserList()
                }else{
                    self.$message.error(res.data)
                }
            })
        },
        checkForm(){
            
        },
        getUserList(){
            //第二负责人列表
            let self = this
            this.$http.postObj("/api/json", {}, function(res) {
                if (res.success) {
                    self.userList = res.data;
                }
            });
        },
        getProjectTypeList(){
            //项目类型列表
            let self = this
            this.$http.postObj("/api/categorys/json", {}, function(res) {
                if (res.success) {
                    self.projectTypeList = res.data;
                }
            });
        },
        getState(){
            let self = this
            //获取州
            this.$http.postQuery('/api/areas/json',{parArearId:0,areaType:1},function(res){
                console.log(res)
                if(res.success){
                    self.stateList = res.data
                    if(self.form.region != ''){
                        for(var i = 0;i<self.stateList.length;i++){
                            if(self.stateList[i].areaName == self.form.region){
                                self.stateId = self.stateList[i].id
                            }
                        }
                    }
                }
            })
        },
        changeState(stateId){
            this.getCityList(stateId)
            this.form.city = ''
            this.form.address = ''
        },
        getCityList(stateId){
            let self = this
            //获取city
            this.$http.postQuery('/api/areas/json',{parArearId:stateId,areaType:2},function(res){
                if(res.success){
                    self.cityList = res.data
                }
            })
        },
        getSingle(){
            //获取单体属性
            let self = this
            this.$http.postObj("/api/monomers/json", {}, function(res) {
                if (res.success) {
                    // var temp = []
                    // for(var i = 0;i<res.data.rows.length;i++){
                    //     if(res.data.rows[i].)
                    //     temp.push(res.data.rows[i])
                    // };
                    self.singleList = res.data
                }
            });
        },
        getSignLeName(id){
            return id;
            console.log(id)
            var name = '';
            for(var i = 0;i<this.singleList.length;i++){
                if(id == this.singleList[i].id){
                    name = this.singleList[i].dictCont
                }
            }
            return name;
        },
        showAddChildView(id,isCreate){
            if(isCreate){
                this.batchChildFormTitle = '添加子项目'
                this.bathChildForm = {}
                if(this.chooseChildRow == 0){
                    this.bathChildForm.parentId=id
                }else{
                    this.bathChildForm.parentId = this.chooseChildRow
                }
            }else{
                this.batchChildFormTitle = '修改子项目'
                 var id = this.chooseChildRow
                if(id == null || id == '' || id == 0){
                    this.$message.error('请选择要修改的项目！');
                    return false
                }
                this.bathChildForm.id = this.chooseChildRow
                let self = this
                this.$http.get('/api/projects/view/'+id,{},function(res){
                    self.bathChildForm.itemName = res.data.itemName
                    if(res.data.projectType == 2){
                        self.bathChildForm.monomerAttr = parseInt(res.data.monomerAttr)
                    }else{
                        self.bathChildForm.monomerAttr = 822
                    }
                    self.bathChildForm.parentId = res.data.parentId
                })
            }
            this.isShowChildView = true
        },
        projectChooseChildRow(id){
            this.chooseChildRow = id
        },
        updateChildProject(){
            if(this.bathChildForm.itemName == ''){
                this.$message.error('请输入项目名称')
                return false
            }
            if(this.bathChildForm.monomerAttr == ''){
                this.$message.error('请选择项目属性')
                return false
            }
            for (var i = 0;i<this.singleList.length;i++){
                if(this.singleList[i].id == this.bathChildForm.monomerAttr){
                    this.bathChildForm.projectType = this.singleList[i].dictExtra
                }
            }
            let self = this
            //修改项目
            this.$http.putObj('/api/projects/'+this.bathChildForm.id,this.bathChildForm,function(res){
                console.log(res)
                if (res.success) {
                    self.$message({
                        message: "修改成功！",
                        type: "success"
                    });
                    self.isShowChildView = false
                        self.searchChildList()

                }else{
                    self.$message.error(res.data)
                }
            })
        },
        batchCreateChild(){
            if(this.bathChildForm.itemName == ''){
                this.$message.error('请输入项目名称')
                return false
            }
            if(this.bathChildForm.monomerAttr == ''){
                this.$message.error('请选择项目属性')
                return false
            }
            for (var i = 0;i<this.singleList.length;i++){
                if(this.singleList[i].id == this.bathChildForm.monomerAttr){
                    this.bathChildForm.projectType = this.singleList[i].dictExtra
                }
            }
            let self = this
            this.$http.postObj('/api/projects/batchCreate',this.bathChildForm,function(res){
                if(res.success){
                    if (res.success) {
                        self.$message({
                            message: "添加成功！",
                            type: "success"
                        });
                        self.searchChildList()
                    }else{
              self.$message.error(res.data)
            }
                    self.bathChildForm = {}
                    self.isShowChildView = false
                }else{
                    self.$message.error(res.data)
                }
            })
        },
        showRoleUserView(row){
            this.isShowRoleUserView = true
            this.currentRoleUserRow = row
            this.notSelectUserListQuery(1)
            this.yiSelectUserList = []
            this.yiSelectUserListQuery(1)
        },
        showRoleUserViewNo(roleId,projectId){
            this.isShowRoleUserView = true
            this.currentRoleUserRow = {
                projectId:projectId,
                roleId:roleId
            }
            this.notSelectUserListQuery(1)
            this.yiSelectUserList = []
            // this.yiSelectUserListQuery(1)
        },
        not_handleCurrentChange(page) {
            this.notSelectUserListQuery(page)
        },
        yi_handleCurrentChange(page){
            this.yiSelectUserListQuery(page)
        },
        notSelectUserListQuery(page){
            this.notCurrentPage = page
            let self = this
            this.$http.postObj('/api/projects/roles/users/notSelectJson/'+this.currentRoleUserRow.projectId+'/'+this.currentRoleUserRow.roleId,{
                projectId:this.currentRoleUserRow.projectId,
                projectRoleId:this.currentRoleUserRow.roleId,
                userName:this.notSelectUserNameSearch,
                page:this.notCurrentPage,
                rows:8
            },function(res){
                if(res.success){
                    self.notSelectUserList = res.data.rows
                    self.notSelect_totalCount = res.data.total
                }
            })
        },
        yiSelectUserListQuery(page){
            this.yiCurrentPage = page
            let self = this
            this.$http.postObj('/api/projects/roles/users/selectUserJson/'+this.currentRoleUserRow.id,{
                // projectId:this.currentRoleUserRow.projectId,
                // projectRoleId:this.currentRoleUserRow.roleId,
                page:page,
                rows:8
            },function(res){
                res = JSON.parse(res)
                    self.yiSelectUserList = res.rows
                    self.yiSelect_totalCount = res.total
            })
        },
        addNotSelectUser(row){
            //项目树编辑用户角色
            var temp = []
            var param = {
                projectId:this.currentRoleUserRow.projectId,
                roleId:this.currentRoleUserRow.roleId,
                userIds:row.userId
            }
            temp.push(param)
            let self = this
            this.$http.putObj('/api/projects/roles/users',temp,function(res){
                if(res.success){
                        self.$message({
                            message: "添加成功！",
                            type: "success"
                        });
                        self.getProjectRoleUserList();
                        self.currentRoleUserRow.id = res.data.projectRoleId
                        self.yiSelectUserListQuery(1);
                        self.notSelectUserListQuery(1);
                        // for(var i = 0;i<self.userRolelist.length;i++){
                        //     console.log(self.userRolelist[i].id)
                        //     if(self.currentRoleUserRow.id == self.userRolelist[i].id){
                        //         self.showRoleUserView(self.userRolelist[i]);
                        //     }
                        // }
                }else{
                    self.$message.error(res.data)
                }
            })
        },
        deleteChooseUser(row){
            let self = this
            this.$http.deletePath('/api/projects/roles/users/delete/'+row.id,{},function(res){
                if(res.success){
                    self.$message({
                            message: "删除成功！",
                            type: "success"
                        });
                        // self.notSelectUserListQuery(1);
                        // for(var i = 0;i<self.currentRoleUserRow.userList.length;i++){
                        //     if(self.currentRoleUserRow.userList[i].projectRoleUserId == row.projectRoleUserId){
                        //         self.currentRoleUserRow.userList.splice(i,1)
                        //     }
                        // }
                        // self.getProjectRoleUserList();

                        self.getProjectRoleUserList();
                        self.yiSelectUserListQuery(1);
                        self.notSelectUserListQuery(1);
                }else{
              self.$message.error(res.data)
            }
            })
        },
        ProjectImportBefore(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        ProjectImportSuccess(res, file) {
            if(res.success){
                this.$message({
                    message: "上传成功！",
                    type: "success"
                });
                this.getProjectRoleUserList()
            }else{
                this.$message.error(res.data)
            }
        },
        downloadTemplate(){
            let self = this
            //项目导入模板下载
            this.$http.get('/api/projects/downloadProjectTemplate',{},function(res){
                self.downloadFile(res.data)
            })
        },
        downloadFile(url){
            window.open(this.ImgPath + url)
        },
    }
}
</script>
<style  rel="stylesheet/scss" lang="scss"   >
#export form {
    max-height: 500px;
    overflow: auto;
}
#export table td {
    padding: 10px;
}
.exportTable tr{
    width: 50%;
    float: left;
    td:first-child{
        text-align: right;
        background: #eff5ff;
    }
    td{
        height: 69px;
    }

}
.export{
    max-height: 80%;
    height: auto !important;
    width: 811px;
    input{
        width: 100%;
    }
}
.el-dialog__headerbtn{
        background-color: #5a63a3;
        width: 28px !important;
        height: 28px !important;
        display: inline-block;
        border-radius: 50%;
        line-height: 28px !important;
        text-align: center;
        z-index: 99;
        i{
            color: #fff !important;
        }
    }
.increase .addProjectForm{
    
    .el-table__header{
        tr th{
            background: none;
            height: 40px;
            line-height: 40px;
            padding: 0;
        }
    }
    .el-table__row{
        tr td{
            padding: 6px 0;
        }
    }
    .el-form{
        text-align: left;
        .el-button--primary{
            color: #fff;
            background-color: #5962a3;
            border: none;
        }
    }
    .lt{
        width: 49%;
        float: left;
    }
    .rt{
        width: 49%;
        float: right;
    }
    .sew{
        background: #f2f5fe;
        height: 40px;
        line-height: 40px;
        color: #333;
        padding: 0 10px;
    }
}
    .project{
        padding-top: 120px;
        .choose{
            background-color: #ffffff;
            border-radius: 4px;
            border: solid 1px #eeeeee;
            padding: 22px 30px;
            margin-bottom: 14px;
            font-size: 15px;
            .el-radio__input.is-checked .el-radio__inner{
                border-color: #5a63a3;
                background: #5a63a3;
            }
            .el-radio__label{
                font-size: 15px;
                padding-left: 12px;
                color: #333
            }
            .add{
                margin-top: 16px;
                margin-bottom: 16px;
                i{
                    color: #5a63a3;
                    margin-right: 12px;
                    font-size: 17px;
                }
                button{
                    color: #fff;
                    background: #5a63a3;
                    height: 38px;
                    line-height: 38px;
                    border: none;
                    border-radius: 4px;
                    width: calc(100% - 29px);
                    width: -webkit-calc(100% - 29px);
                }
            }
            .ject{
                margin-bottom: 16px;
                color: #333;
                img{
                    display: inline-block;
                    margin-right: 12px;
                    position: relative;
                    top: 3px;
                }
                &:last-child{
                    margin-bottom: 0;
                }
                span{
                     width: calc(100% - 29px);
                    width: -webkit-calc(100% - 29px);
                    display: inline-block;
                }
            }
        }
        .project_search{
            background-color: #ffffff;
            border-radius: 4px;
            padding: 12px 0;
            margin-bottom: 24px;
            .typeS{
                padding: 16px 30px;
                border-bottom: 1px solid #eeeeee;
                .el-select{
                    width: 100%;
                }
            }
            .el-collapse{
                border: none;
                .el-collapse-item__wrap{
                    border:none;
                }
            }
            .el-collapse-item__header{
                padding: 0 30px;
                border-bottom: 1px solid #eeeeee;
            }
            .demonstration{
                color: #333333;
                margin-bottom: 10px;
                display: block;
            }
            .el-input__inner{
                font-size: 12px;
            }
            .time{
                padding: 16px 30px;
                .block .el-input__inner{
                    width: 100%;
                }
                .el-date-editor .el-range-input, .el-date-editor .el-range-separator{
                    font-size: 12px;
                }
            }
            .sumbit{
                padding: 0 30px;
                button{
                    width: 100%;
                    background-color: #5a63a3;
                    border-radius: 4px;
                    border: solid 1px #c3c7ea;
                    &:hover{
                        border-color: #5a63a3;
                        background: #c3c7ea;
                    }
                }
            }
            .pro_name{
                padding: 16px 30px;
                border-top: 1px solid #eeeeee;
                border-bottom: 1px solid #eeeeee;
            }
            .pro_man{
                padding: 16px 30px;
            }
        }
    }
    .increase{
        background: #fff;
        padding: 5%;
        border: solid 1px #eeeeee;
        margin-bottom: 30px;
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 200px;
            height: 150px;
            line-height: 150px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .lt{
            width: 200px;
            float: left;
            .feng{
                color: #333333;
                font-size: 14px;
                text-align: center;
                margin-bottom: 16px;
            }
        }
        .rt{
            width: calc(100% - 200px);
            width: -webkit-calc(100% - 200px);
            float: left;
            .bo50{
                width: 50%;
                margin-right: 0;
            }
            .bo70{
                width: 70%;
                .el-range-separator{
                    padding: 0;
                }
            }
            .el-form-item{
                margin-bottom: 10px;
            }
            .el-form-item__label{
                width: 100px;
                text-align: right;
            }
            .el-form-item__content{
                width: calc(100% - 100px);
                width: -webkit-calc(100% - 100px);
                .el-select{
                    width: 100%;
                }
            }
            .el-range-editor.el-input__inner{
                width: 100%;
            }
            .select{
                width: 100%;
                .el-select{
                    width: 120px;
                    margin-right: 5px;
                    .el-input{
                        width: 100%;
                        
                        .el-input__inner{
                            height: 40px;
                            line-height: 40px;
                        }
                    }
                }
                 .el-input{
                   width: calc(100% - 250px);
                }
            }
        }
        .baocun{
            text-align: right;
            width: 100%;
            margin-top: 20px;
            .el-button{
                background-color: #5a63a3;
                border-radius: 3px;
                border: solid 1px #dde9ef;
                color: #fff;
            }
            
        }
        .increase_table{
            margin-top: 30px;
            tr th{
                text-align: center;
                background-color: #f2f5fe;
            }
            tr td{
                text-align: center;
            }
            .dewe{
                width: 100%;
                overflow-x: auto;
                overflow-y: hidden;
                margin-bottom: 30px;
                .trTop{
                    td{
                        background-color: #f2f5fe;   
                    }
                }
                tr{
                    td{
                        text-align: center;
                        border-bottom: 1px solid #EBEEF5;
                        border-right: 1px solid #EBEEF5;
                        padding: 12px 0;
                        min-width: 0;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        text-overflow: ellipsis;
                        vertical-align: middle;
                        position: relative;
                        &:first-child{
                            border-right: 2px solid #EBEEF5;
                        }
                        div{
                            cursor: pointer;
                            &:hover{
                                color: #5962a3;
                            }
                        }
                    }
                }
            }
            .dewa{
                width: 100%;
                .trTop{
                    td{
                        background-color: #f2f5fe;   
                    }
                }
                tr{
                    td{
                        text-align: center;
                        border-bottom: 1px solid #EBEEF5;
                        border-right: 1px solid #EBEEF5;
                        padding: 12px 0;
                        min-width: 0;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        text-overflow: ellipsis;
                        vertical-align: middle;
                        position: relative;
                        div{
                            cursor: pointer;
                            &:hover{
                                color: #5962a3;
                            }
                        }
                    }
                }
            }
        }
    }
    .avatarS{
        float: right;
        margin-left: 10px;
        .el-upload{
            border: none !important;
        }
    }
    #container{
    position: relative;
    .select-box{
        -webkit-appearance: none;
        background-color: #FFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;
        position: relative;
        z-index: 9;
    }
    .el-input{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }
}
.tectCent{
    margin-top: 18px;
    text-align: center;
    .el-form-item__content{
        margin-left: 0 !important
    }
}
</style>
